<template>
    <div>
        <div class="top_header">
            <wd-header title="已订阅记忆法课程">
                <span class="iconfont" @click="goback" slot="left">&#xe697;</span>
            </wd-header>
        </div>
        <div class="videolist">
            <transition-group enter-active-class="animated fadeIn">
                <router-link class="oneOf" tag="div" v-for="(item,index) in datas" :key="index" :to="{ name:'singlevideo' , params:{title:item.title,likes:item.likes,time:item.create_time,views:item.views,videourl:item.videoUrl,imgurl:item.imgUrl,content:item.content,memory_id:item.memoryId,paytype:item.payType} }">
                    <div class="top">
                        <div class="left">
                            <img v-lazy="item.imgUrl" alt="加载中…">
                        </div>
                        <div class="right">
                            <div class="rightTop">
                                <span>{{item.title}}</span>
                                <i :class="[item.payType == 1 && item.full_price == 0 ? 'free' : (item.payType == 1 ? 'hadsubscribe' : 'unsubscribe')]">{{ item.payType == 1 && item.full_price == 0 ? '免费' : (item.payType == 0 ? '订阅' : '已订阅') }}</i>
                            </div>
                            <div class="rightMiddle">
                                <p>{{item.content.slice(0,15)}}...</p>
                            </div>
                            <div class="rightBottom">
                                <!-- 内容内容内容内容内容内容内容内容容内容内容容内容内容 -->
                            </div>
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="bottomLeft">
                            <i class="iconfont">&#xe612;</i>
                            <span>{{item.likes}}次点赞</span>
                        </div>
                        <span>{{item.views > 10000 ? (item.views/10000).toFixed(1)+'万' : item.views}}次播放</span>
                    </div>
                </router-link>
            </transition-group>
        </div>
    </div>
</template>
<script>
export default {
    name: 'myvideolist',
    data() {
        return {
            datas: [],
            auth: JSON.parse(localStorage.user),
            url: 'http://www.jydsapp.com/jydsApi/api/h5/video/getMemoryList',
            pageIndex: 1
        }
    },
    computed: {
        lessonid() {
            return this.$store.state.my_video_data.lessonid
        }
    },
    beforeRouteLeave(to,from,next){
        let routeinfo = to.params
        this.$store.commit('saveSingleVideoNeedData', routeinfo)
        next()
    },
    created() {
        this.getData()
    },
    methods: {
        goback() {
            this.$router.go(-1)
        },
        getData() {
            let str = `{"userPhone":"${this.auth.user.phoneNum}",
            "token":"${this.auth.token}",
            "pageIndex":${this.pageIndex},
            "lessonId":"${this.lessonid}",
            "type":0}`
            let toast = this.$Toast({
                content: '加载中…',
                iconClass: 'loader',
                autoClose:false
            })
            this.fetch({
                method: 'post',
                url: this.url,
                params: {
                    "paramStr": str
                }
            }).then((response) => {
                toast.close()
                let res = response.data
                if (res.code == 200) {
                    this.datas = JSON.parse(res.data).getMemoryList
                } else if (res.code == 103) { //五天内未登录 token失效跳转到登陆页面
                    toast.close()
                    localStorage.removeItem('user')
                    this.$Toast({
                        content: '请重新登录'
                    })
                    this.$router.replace('/login')
                } else{
                    toast.close()
                    console.log(res.message)
                }
            }).catch((err) => {

            })
        }
    }
}
</script>
<style lang="scss" scoped>
.animated {
    animation-duration: .3s;
}

.top_header{
    position:fixed;
    width: 100%;
    top: 0;
    left: 0;
}
.videolist{
    margin-top:1.296296rem;
}
.oneOf {
    display: flex;
    flex-direction: column;
    padding: 0.555556rem 0.37037rem 0 0.37037rem;
    border-bottom: 0.185185rem solid #f3f3f3;
    .top {
        display: flex;
        .left {
            flex: 1;
            img {
                width: 100%;
            }
        }
        .right {
            flex: 1;
            margin-left: 0.37037rem;
            .rightTop {
                display: flex;
                justify-content: space-between;
                span {
                    font-size: 0.444444rem;
                }
                .unsubscribe {
                    background: #fe4f4a;
                    color: #fff;
                    padding: 3px;
                    border-radius: 2px;
                }
                .hadsubscribe {
                    padding: 3px;
                    border: 1px solid #bebebe;
                    border-radius: 2px;
                    color: #434343;
                }
                .free{
                    padding: 3px;
                    border-radius: 2px;
                    background: #52d668;
                    color: #fff;
                }
            }
            .rightMiddle {
                margin: 5px 0;
                p {
                    font-size: 0.37037rem;
                    color: #2e2e2e;
                }
            }
            .rightBottom {
                color: #717171;
            }
        }
    }
    .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0.185185rem 0;
        .bottomLeft {
            span {
                color: #666;
            }
        }
        span {
            color: #666;
        }
        i {
            color: red;
            font-size: 12px;
        }
    }
    
}
</style>
